<template>
  <div class="lifespan-detail">
    <a-descriptions v-if="record" :column="2" bordered>
      <a-descriptions-item label="姓名">{{ record.name }}</a-descriptions-item>
      <a-descriptions-item label="性别">{{ record.gender === 'male' ? '男' : '女' }}</a-descriptions-item>
      <a-descriptions-item label="当前年龄">{{ record.currentAge }}岁</a-descriptions-item>
      <a-descriptions-item label="天定寿命">{{ record.destinedLifespan }}岁</a-descriptions-item>
      <a-descriptions-item label="剩余寿命">{{ record.remainingLife }}年</a-descriptions-item>
      <a-descriptions-item label="预警级别">{{ getWarningText(record.warningLevel) }}</a-descriptions-item>
      <a-descriptions-item label="居住地">{{ record.location }}</a-descriptions-item>
      <a-descriptions-item label="职业">{{ record.profession }}</a-descriptions-item>
    </a-descriptions>

    <div class="actions">
      <a-space>
        <a-button @click="$emit('close')">关闭</a-button>
        <a-button type="primary" @click="$emit('update')">更新</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  record: Object
})

const emit = defineEmits(['close', 'update'])

const getWarningText = (level) => {
  const texts = {
    high: '高危预警',
    medium: '中度预警',
    low: '正常',
    none: '-'
  }
  return texts[level] || '-'
}
</script>

<style lang="scss" scoped>
.lifespan-detail {
  .actions {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
